<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form {
            width: 400px;
            height: 480px;
            background: lightblue;
            margin: 20px auto;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
        }

        p {
            width: 330px;
            height: 5px;
            display: flex;
            justify-content: space-between;
        }

        p label {
            width: 55px;
            font-size: 12px;
            text-align: center;
        }

        input {
            width: 265px;
            height: 14px;
            margin-top: -1px;
            outline: none;
        }

        #checkbox {
            width: 60px
        }

        .lastlable {
            margin-right: 220px;
            width: 100px
        }

        div {
            margin-left: 25px;
            width: 100%;
            height: 30px;
        }
    </style>
</head>

<body>
    <form action="form" id="form">
        <p>
            <label for="">账号</label>
            <input type="text" placeholder="用户名不得使用特殊字符,长度在6-20位之间" value="">
        </p>
        <p>
            <label for="">昵称</label>
            <input type="text" value="">
        </p>
        <p>
            <label for="">电子邮件</label>
            <input type="text">
        </p>
        <p>
            <label for="">身份证</label>
            <input type="text">
        </p>
        <p>
            <label for="">手机号码</label>
            <input type="text">
        </p>
        <p>
            <label for="">生日</label>
            <input type="text">
        </p>
        <p>
            <label for="">密码</label>
            <input type="text">
        </p>
        <p>
            <label for="">确认密码</label>
            <input type="text">
        </p>
        <p>
            <input type="checkbox" aria-checked="false" id="checkbox">
            <label for="" class='lastlable'>10天免登陆</label>
        </p>

        <div>
            <button>确认</button>
            <button>清空</button>
        </div>

    </form>
    <script>
        //   【1】验证账号
        // - 用户名不能为空
        // - 不能使用特殊字符（只能使用数字、字母、下划线、横杠）
        // - 必须以字母开头
        // - 长度6-20
        // var str = 'a123456789'
        // var reg = /^[a-z]([0-9a-zA-Z_-]{5,14})$/
        // console.log(reg.test(str))
        // 【2】昵称只能输入3-6个中文  /[\u4e00-\u9fa5]{3,6}/ 
        var str1 = '李师傅'
        var reg1 = /[\u4e00-\u9fa5]{3,6}/
        console.log(reg1.test(str1))
        //     【3】电子邮件
        //   + 163邮箱：
        //   + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
        //   + @后面的域名只能是163
        //   + 域名后缀（.com .cn .net）可以有多个。
        var str2 = 'a123abc@163.com'
        var reg2 = /^[a-zA-Z]([0-9a-zA-Z_-]{5,11})@163\.(com|cn|net)$/
        console.log(reg2.test(str2))
        //     密码：
        // +   8-14个字符
        // +   数字 字母 标点标点符号 组成

        var reg3 = /^[0-9a-zA-Z,.]{8,14}$/
        var str3 = '12345abcde.'
        console.log(reg3.test(str3))

        // 【4】身份证 18位数 后面以为可能是 X x
        var reg4 = /^\d{17}[0-9Xx]$/
        var str4 = '123456789012111111'
        console.log(reg4.test(str4))
        // 【5】手机号码
        // - 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了
        var reg5 = /^1[345678]\d{8,9}$/
        // /^1[356789]\d{9}$/
        var str5 = '1388456789'
        console.log(reg5.test(str5))
        // 【6】生日验证
        //     + 1999 / 05 / 08
        //     + 1999 - 05 - 08
        //     + 19990508
        var reg6 = /^[1-2]\d{3}([/-]?)\d{2}\1\d{2}$/
        var str6 = '1999/05/08'
        console.log(reg6.test(str6))
        // 【7】密码
        //   + 长度小于20 
        //   + 不能包含空格 密码不一致能不能提交
        var reg7 = /^[^\s]{6,16}$/
        var str7 = '123123'
        console.log(reg7.test(str7));
        var inputs = document.querySelectorAll('input');
        // inputs.forEach(function (item, index) {
        //     console.log(item)
        // })
        var form = document.querySelector('#form')
        form.onchange = function (e) {
            var str = e.target.value;
            console.log(str)
            var reg = /^[a-z]([0-9a-zA-Z_-]{5,14})$/;
            //     "/[\u4e00-\u9fa5]{3,6}/"]
            var res = reg.test(str)
            var reg1 = /[\u4e00-\u9fa5]{3,6}/
            var res1 = reg1.test(str1)
            // regs.forEach(function (item, index) {
            //     var reg = regs[index];
            // console.log(res)
            // var res = reg.test(str)
            if (res !== true) {
                alert('账号格式错误');
                e.target.value = ''
                console.log(reg)
            }
            if (res1 !== true) {
                alert('昵称格式错误');
                e.target.value = ''
            }
        }
    </script>
</body>

</html>